<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row class="live_wrapper clearfix">
                        <Input v-model="filter.name" @on-search="search" search enter-button="查询" placeholder="请输入商品名称"
                               style="width:290px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                         <Select v-model="filter.cate_id" style="float:right; width: 200px;margin-right: 35px;" @on-change="search" placeholder="选择商品品类">
                            <Option value="0">全部</Option>
                            <Option :value="item.id" v-for="(item, index) in cate_list">{{item.name}}</Option>
                         </Select>
                    </Row>
                    <Row class="margin-top-10 table_pattern table_pattern2">
                        <Table :loading="loading" :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row> 
    </div>
</template>
<script>
    import config from '@/config'
    import { goodList, changeGoodStatus, cateListForSelect, goodDetail} from '@/api/main'
    export default {
        data() {
            return {
                pagenation: {},
                columns: [
                    {
                        key: 'name',
                        title: '商品名称',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.name)
                        },
                    },
                    {
                        key: 'cover',
                        title: '商品封面图',
                        align: 'center',
                        render: (h, params) => {
                            return h(
                                'div',
                                {
                                    style: {
                                        backgroundImage: 'url(' + params.row.cover + ')',
                                        width: '150px',
                                        height: '120px',
                                        objectFit:'cover',
                                        margin: '10px auto',
                                        position: 'relative',
                                        cursor: 'pointer',
                                        backgroundSize: 'cover',
                                    },
                                    on: {
                                        click: e => {
                                        },
                                    },
                                }
                            )
                        },
                    },
                    {
                        key: 'cate_name',
                        title: '所属品类',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.cate_name)
                        },
                    },
                    {
                        key: 'is_zl',
                        title: '是否租赁商品',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', parseInt(params.row.is_zl) ? '是' : '否')
                        },
                    },
                    {
                        key: 'sort',
                        title: '优先级',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.sort)
                        },
                    },
                    {
                      key: 'status',
                      title: '状态',
                      width: 150,
                      align: 'center',
                      render: (h, params) => h('i-switch', {
                        props: {
                          value: params.row.status,
                          size: 'large',
                          'true-value': 1,
                          'false-value': 0
                        },
                        on: {
                          'on-change': () => {
                            this.changeGoodStatus(params.row)
                          }
                        }
                      }, [
                        h('span', {
                          slot: 'open',
                          domProps: {
                            innerHTML: '开启'
                          }
                        }),
                        h('span', {
                          slot: 'close',
                          domProps: {
                            innerHTML: '关闭'
                          }
                        })
                      ]
                      )
                    },
                    {
                        key: 'created_time',
                        title: '创建时间',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.created_time)
                        },
                    },
                ],
                list: [],
                cate_list:[],
                loading: true,
                filter: {
                    page: 0,
                    name: '',
                    cate_id: 0,
                    type: 3,
                },
            }
        },
        methods: {
            change: function(page) {
                this.loading = true
                this.filter.page = page-1
                this.getGoodList()
            },
            search: function () {
                this.filter.page = 0
                this.getGoodList()
            },
            getGoodList() {
              goodList(this.filter).then(res => {
                  if (res.code == 0) {
                      this.list = res.data
                      this.loading = false
                      this.pagenation.currentPage = parseInt(res.currentPage) + 1
                      this.pagenation.totalPage = parseInt(res.totalPage)
                      this.pagenation.perPage = parseInt(res.perPage)
                  }
              })
            },
        },
        mounted() {
            this.getGoodList()
            let obj = {}
            obj.type = 2
            cateListForSelect(obj).then(res => {
              this.cate_list = res.data
            })
        }
    }
</script>
